<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>前端路由的基石</title>
</head>
<body>
    <a href="http://www.atguigu.com" onclick="return push('/test1')">push test1</a>
    <button onClick="push('/test2')">push test2</button>
    <button onClick="replace('/test3')">replace test3</button>
    <button onClick="back()">&lt;= 回退</button>
    <button onClick="forword()">前进 =&gt;</button>

    <script src="https://cdn.bootcdn.net/ajax/libs/history/4.7.2/history.js"></script>
    <script type="text/javascript">
      // 方法一，直接使用H5推出的history身上的API

      // 方法二，hash值（锚点），兼容性好，无缝切换
      let history = History.createHashHistory() 
      
      function push (path){
        history.push(path)
        return true
      }

      function replace (path) {
        history.replace(path) // 直接替换 无记录
      }

      function back(){
        history.goBack()
      }

      function forword(){
        history.goForward()
      }

      history.listen((location) => {
        console.log('请求路由路径变化了', location);
      })

    </script>
</body>
</html>